<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="tab_div">
    <el-tab-pane v-for="item in mapList" :label="item.mapName" :name="`name_${item.id}`">
      <deviceInfo v-if="mapList.length>0" :mapInfo="item" :mapWH="mapWH"  ref="deviceInfo"/>
      <span v-else>没有地图</span>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import deviceInfo from '@/views/map/device_position'
  import {list} from '@/api/deviceMap'
  export default {
    components: {deviceInfo},
    created() {
      this.$nextTick(() => {
        list().then(res => {
          this.mapList = res
          if (this.mapList.length > 0) {
            this.activeName = "name_" + this.mapList[0].id;
          }
        }).catch(err => {
          console.log(err.response.data.message)
        })
      })
    },
    data(){
      return {
        activeName: null,
        mapList: [],
        mapWH: {},
        dict:{},sup_this:this,
      }
    },
    methods: {
      handleClick(tab, event) {

      }
    }
  }
</script>
<style scoped>
  .tab_div {
    padding: 0px 0px 0px 10px;
  }

  .el-tabs__header{
    margin: 0px !important;
  }

  .el-tab-pane{
    overflow: auto!important;
  }
</style>
